<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<script type="text/javascript" src="js/jquery.min.js"></script>

<html>
<head>
	<title>竞赛呈现</title>
	<meta name="decorator" content="default"/>

	<script type="text/javascript">

		window.onload = myfun;
          var time = 0;
		function myfun()
		{

			time = document.getElementById("time").value;
			aa();
		} 　　

function aa() {
	var intDiff = parseInt(time);//倒计时总秒数量
	function timer(intDiff) {
		window.setInterval(function () {
			var day = 0,
					hour = 0,
					minute = 0,
					second = 0;//时间默认值
			if (intDiff > 0) {
				day = Math.floor(intDiff / (60 * 60 * 24));
				hour = Math.floor(intDiff / (60 * 60)) - (day * 24);
				minute = Math.floor(intDiff / 60) - (day * 24 * 60) - (hour * 60);
				second = Math.floor(intDiff) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);
			}
			if (minute <= 9) minute = '0' + minute;
			if (second <= 9) second = '0' + second;
			$('#day_show').html(day + "天");
			$('#hour_show').html('<s id="h"></s>' + hour + '时');
			$('#minute_show').html('<s></s>' + minute + '分');
			$('#second_show').html('<s></s>' + second + '秒');
			intDiff--;
		}, 1000);
	}

	$(function () {
		timer(intDiff);
	});

}

		function three1(){
			for(var  i = 1; i <= 10; i++){document.getElementById("three"+i).style.display="";document.getElementById("answer"+i).style.display="";}
			for(var  i = 11; i <= 20; i++){document.getElementById("three"+i).style.display="none";document.getElementById("answer"+i).style.display="none";}
			for(var  i = 21; i <= 30; i++){document.getElementById("three"+i).style.display="none";document.getElementById("answer"+i).style.display="none";}
			for(var  i = 31; i <= 40; i++){document.getElementById("three"+i).style.display="none";document.getElementById("answer"+i).style.display="none";}
			for(var  i = 41; i <= 50; i++){document.getElementById("three"+i).style.display="none";document.getElementById("answer"+i).style.display="none";}
		};



		function three2(){
			for(var  i = 1; i <= 10; i++){document.getElementById("three"+i).style.display="none";document.getElementById("answer"+i).style.display="none";}
			for(var  i = 11; i <= 20; i++){document.getElementById("three"+i).style.display="";document.getElementById("answer"+i).style.display="";}
			for(var  i = 21; i <= 30; i++){document.getElementById("three"+i).style.display="none";document.getElementById("answer"+i).style.display="none";}
			for(var  i = 31; i <= 40; i++){document.getElementById("three"+i).style.display="none";document.getElementById("answer"+i).style.display="none";}
			for(var  i = 41; i <= 50; i++){document.getElementById("three"+i).style.display="none";document.getElementById("answer"+i).style.display="none";}



		};

		function three3(){
			for(var  i = 1; i <= 10; i++){document.getElementById("three"+i).style.display="none";document.getElementById("answer"+i).style.display="none";}
			for(var  i = 11; i <= 20; i++){document.getElementById("three"+i).style.display="none";document.getElementById("answer"+i).style.display="none";}
			for(var  i = 21; i <= 30; i++){document.getElementById("three"+i).style.display="";document.getElementById("answer"+i).style.display="";}
			for(var  i = 31; i <= 40; i++){document.getElementById("three"+i).style.display="none";document.getElementById("answer"+i).style.display="none";}
			for(var  i = 41; i <= 50; i++){document.getElementById("three"+i).style.display="none";document.getElementById("answer"+i).style.display="none";}
		};

		function three4(){
			for(var  i = 1; i <= 10; i++){document.getElementById("three"+i).style.display="none";document.getElementById("answer"+i).style.display="none";}
			for(var  i = 11; i <= 20; i++){document.getElementById("three"+i).style.display="none";document.getElementById("answer"+i).style.display="none";}
			for(var  i = 21; i <= 30; i++){document.getElementById("three"+i).style.display="none";document.getElementById("answer"+i).style.display="none";}
			for(var  i = 31; i <= 40; i++){document.getElementById("three"+i).style.display="";document.getElementById("answer"+i).style.display="";}
			for(var  i = 41; i <= 50; i++){document.getElementById("three"+i).style.display="none";document.getElementById("answer"+i).style.display="none";}
		};

		function three5(){
			for(var  i = 1; i <= 10; i++){document.getElementById("three"+i).style.display="none";document.getElementById("answer"+i).style.display="none";}
			for(var  i = 11; i <= 20; i++){document.getElementById("three"+i).style.display="none";document.getElementById("answer"+i).style.display="none";}
			for(var  i = 21; i <= 30; i++){document.getElementById("three"+i).style.display="none";document.getElementById("answer"+i).style.display="none";}
			for(var  i = 31; i <= 40; i++){document.getElementById("three"+i).style.display="none";document.getElementById("answer"+i).style.display="none";}
			for(var  i = 41; i <= 50; i++){document.getElementById("three"+i).style.display="";document.getElementById("answer"+i).style.display="";}
		};
	</script>
	<style type="text/css">
     .big{
          width: 1000px;
		 height: 1200px;
		 margin:0 auto;
		 border:1px solid cadetblue ;
	 }
	  .bot{
		  width: 98%;
		  height: 640px;
		  margin:0 auto;
		  position:relative;
		  /*left:150px;*/
		  /*bottom:20px;*/
		  top: 10px;
		  /*border:1px solid cadetblue ;*/
	  }

		.bot-now{
			position:relative;
			height: 80px;
		}
		.bot-now-img{
          float: left;
			width: 30%;
			height: 100%;
		}
		.bot-now-img img{
			float: left;
			width: 80px;
			height: 100%;
		}
		.bot-now-img label{
			float: left;
			font-size: 24px;
			line-height: 80px;

		}
		.bot-now-time{
			float: right;
			width: 65%;
			height: 99%;
			border:1px solid cadetblue ;
		}
		.bot-now-time label{
			float: left;
			line-height: 40px;
			font-size: 16px;
			font-weight:bold;
			position:relative;
			top: 10px;
			left: 20px;
		}
		.bot-now-time span{
			font-weight:bold;
			font-size: 18px;
			position:relative;
			top: 50px;
			left: 40px;
		}
		.bot-tow{
			position:relative;
			top: 20px;
			width: 100%;
			height: 80%;
		}
		.bot-tow-ranking{
			float: left;
			height: 100%;
			width: 32%;
			border:1px solid cadetblue ;
		}
	 .bot-tow-ranking label{
		 font-weight:bold;
		 font-size: 14px;
		 position:relative;
		 top: 10px;
		 left: 10px;
		 width: 100%;
	 }
	 .ranking-11{
		 position:relative;
		 top: 10px;
		 width: 100%;
		 height: 80px;
	 }
		.ranking{
			float: left;
			position:relative;
			top: 10px;
			border:1px solid cadetblue ;
			width: 80px;
			line-height: 25px;
			text-align: center;
           margin-left: 16px;
		}

	 .ranking-1{
		 float: left;
		 position:relative;
		 top: 20px;
		 border:1px solid cadetblue ;
		 width: 80px;
		 line-height: 25px;
		 text-align: center;
		 margin-left: 16px;
	 }
		.bot-three{
			position:relative;
			top: 10px;
			/*border:1px solid cadetblue ;*/
			width: 95%;
			height: 76%;
			margin: 0 auto;
		}
		.bot-three table{
			position:relative;
			top: 20px;
			width: 100%;
			/*height: 300px;*/
			/*background-color: #0072c6;*/
		}
		/*.bot-three table tr{*/
			/*width: 100%;*/
			/*background-color: #000088;*/
		/*}*/

		.bot-three table tr td{
			position:relative;
			line-height: 30px;
			/*width: 30%;*/
		}
	 .bot-three table tr td img{
		 width: 30px;
		 height: 30px;
	 }
		.bot-flag{
			float: right;
			border:1px solid cadetblue ;
			width: 65%;
			height: 90px;
		}
		.bot-flag label{
			font-weight:bold;
			font-size: 14px;
			position:relative;
			top: 10px;
			left: 10px;
		}
		.bot-flag-div{
			position:relative;
			top: 20px;
			height:55%;
			width:100%;
			overflow:auto;
			overflow-x: hidden;
		}
	 .bot-flag-div p{
		 position:relative;
		 left: 10px;
	 }
		.bot-answer{
			float: right;
			border:1px solid cadetblue ;
			position: relative;
			top: 10px;
			width: 65%;
			height: 80%;

		}
		.bot-answer label{
			font-weight:bold;
			font-size: 14px;
			position:relative;
			top: 5px;
			left: 10px;
		}
	 .bot-answer table{
		 position:relative;
		 top: 6px;
		 left: 10px;
		 width: 97%;
		 /*height: 92%;*/
	 }

	 .bot-answer table tr td img{
		 width: 30px;
		 height: 30px;
	 }


	</style>

</head>
<body>





<div class="big">
   <div class="bot" >
	   <div class="bot-now">
		   <div class="bot-now-img">
			   <img src="${raceSchedule.scheduleLogo}">
			   <label>&nbsp;&nbsp;&nbsp;${raceSchedule.scheduleName}</label>
		   </div>
		   <div class="bot-now-time">

			   <input id="time" type="hidden" value="${time}">

			   <label>倒计时:</label>
			  <span>
				  <strong id="hour_show">0时</strong>
		          <strong id="minute_show">0分</strong>
		          <strong id="second_show">0秒</strong>
			  </span>
		   </div>
	   </div>
	   <div class="bot-tow">
          <div class="bot-tow-ranking">
            <label>竞赛队伍排名：</label>
			  <div class="ranking-11">
			  <div onclick="three1()" style="cursor:pointer" class="ranking"> 第1到10名</div>
			  <div onclick="three2()" style="cursor:pointer" class="ranking">第11到20名</div>
			  <div onclick="three3()" style="cursor:pointer" class="ranking">第21到30名</div>
			  <div onclick="three4()" style="cursor:pointer" class="ranking-1">第31到40名</div>
			  <div onclick="three5()" style="cursor:pointer" class="ranking-1">第41到50名</div>
			  </div>
			  <div class="bot-three">
				  <table border="1">
					  <tr>
						  <td>排名</td>
						  <td>团队名称</td>
						  <td>总得分</td>
					  </tr>

                <c:forEach items="${raceScheduleTeamSubjects}" var="raceScheduleTeamSubject" varStatus="RSTSIndex">

					<c:if test="${RSTSIndex.index + 1 <= 10}">
					<tr id="three${RSTSIndex.index + 1}">
						<td>${RSTSIndex.index + 1}</td><td><img src="${raceScheduleTeamSubject.teamLogo}">${raceScheduleTeamSubject.teamid}</td><td>${raceScheduleTeamSubject.score}</td>
					</tr>
					</c:if>

					<c:if test="${RSTSIndex.index + 1 > 10 && RSTSIndex.index + 1 <= 20}">
						<tr id="three${RSTSIndex.index + 1}" style="display:none">
							<td>${RSTSIndex.index + 1}</td><td><img src="${raceScheduleTeamSubject.teamLogo}">${raceScheduleTeamSubject.teamid}</td><td>${raceScheduleTeamSubject.score}</td>
						</tr>
					</c:if>

					<c:if test="${RSTSIndex.index + 1 > 20 && RSTSIndex.index + 1 <= 30}">
						<tr   id="three${RSTSIndex.index + 1}" style="display:none">
							<td>${RSTSIndex.index + 1}</td><td><img src="${raceScheduleTeamSubject.teamLogo}">${raceScheduleTeamSubject.teamid}</td><td>${raceScheduleTeamSubject.score}</td>
						</tr>
					</c:if>

					<c:if test="${RSTSIndex.index + 1 > 30 && RSTSIndex.index + 1 <= 40}">
						<tr id="three${RSTSIndex.index + 1}" style="display:none">
							<td>${RSTSIndex.index + 1}</td><td><img src="${raceScheduleTeamSubject.teamLogo}">${raceScheduleTeamSubject.teamid}</td><td>${raceScheduleTeamSubject.score}</td>
						</tr>
					</c:if>

					<c:if test="${RSTSIndex.index + 1 > 40 && RSTSIndex.index + 1 <= 50}">
						<tr  id="three${RSTSIndex.index + 1}" style="display:none">
							<td>${RSTSIndex.index + 1}</td><td><img src="${raceScheduleTeamSubject.teamLogo}">${raceScheduleTeamSubject.teamid}</td><td>${raceScheduleTeamSubject.score}</td>
						</tr>
					</c:if>


				</c:forEach>

				  </table>
			  </div>
		  </div>
		   <div class="bot-flag">
                 <label> 最新Flag情况：</label>
			   <div class="bot-flag-div">


				   <c:forEach items="${flags}" var="flag">
					     ${flag}
				   </c:forEach>


			   </div>
		   </div>
		   <div class="bot-answer">
               <label>答题情况：</label>
			   <table border="1">
				   <tr style="line-height: 30px">
					   <td>团队名称</td>
					   <c:forEach items="${raceCtfSubjects}" var="raceCtfSubject">
					   <td>
						   ${raceCtfSubject.ctfSubjectName}
					   </td>
					   </c:forEach>
				   </tr>


				   <c:forEach items="${raceScheduleTeamSubjects}" var="raceScheduleTeamSubject" varStatus="RSTSIndex">
					   <c:if  test="${RSTSIndex.index + 1 <= 10}">
						   <tr id="answer${RSTSIndex.index + 1}" style="line-height: 30px">
							   <td><img src="${raceScheduleTeamSubject.teamLogo}">${raceScheduleTeamSubject.teamid}</td>
							   <c:forEach items="${raceCtfSubjects}" var="raceCtfSubject">
								   <td>
									   <c:forEach items="${raceScheduleTeamSubjectList}" var="raceScheduleTeamSubjectList">
										   <%--raceScheduleTeamSubjectList.subjectid ---> 里面的是团队id --%>
									   <c:if test="${raceScheduleTeamSubject.scheduleid == raceScheduleTeamSubjectList.teamid && raceScheduleTeamSubjectList.subjectid==raceCtfSubject.id}">
										   <c:if test="${raceScheduleTeamSubjectList.rightandwrong == '0'}"></c:if>
										   <c:if test="${raceScheduleTeamSubjectList.rightandwrong == '1'}">正确</c:if>
										   <c:if test="${raceScheduleTeamSubjectList.rightandwrong == '2'}">错误</c:if>
									   </c:if>
									   </c:forEach>
								   </td>
							   </c:forEach>
						   </tr>
					   </c:if>

					   <c:if test="${RSTSIndex.index + 1 > 10 && RSTSIndex.index + 1 <= 20}">
						   <tr id="answer${RSTSIndex.index + 1}" style="line-height: 30px;display:none">
							   <td><img src="${raceScheduleTeamSubject.teamLogo}">${raceScheduleTeamSubject.teamid}</td>
							   <c:forEach items="${raceCtfSubjects}" var="raceCtfSubject">
								   <td>
									   <c:forEach items="${raceScheduleTeamSubjectList}" var="raceScheduleTeamSubjectList">
										   <%--raceScheduleTeamSubjectList.subjectid ---> 里面的是团队id --%>
										   <c:if test="${raceScheduleTeamSubject.scheduleid == raceScheduleTeamSubjectList.teamid && raceScheduleTeamSubjectList.subjectid==raceCtfSubject.id}">
											   <c:if test="${raceScheduleTeamSubjectList.rightandwrong == '0'}"></c:if>
											   <c:if test="${raceScheduleTeamSubjectList.rightandwrong == '1'}">正确</c:if>
											   <c:if test="${raceScheduleTeamSubjectList.rightandwrong == '2'}">错误</c:if>
										   </c:if>
									   </c:forEach>
								   </td>
							   </c:forEach>
						   </tr>
					   </c:if>


					   <c:if  test="${RSTSIndex.index + 1 > 20 && RSTSIndex.index + 1 <= 30}">
						   <tr id="answer${RSTSIndex.index + 1}" style="line-height: 30px;display:none">
							   <td><img src="${raceScheduleTeamSubject.teamLogo}">${raceScheduleTeamSubject.teamid}</td>
							   <c:forEach items="${raceCtfSubjects}" var="raceCtfSubject">
								   <td>
									   <c:forEach items="${raceScheduleTeamSubjectList}" var="raceScheduleTeamSubjectList">
										   <%--raceScheduleTeamSubjectList.subjectid ---> 里面的是团队id --%>
										   <c:if test="${raceScheduleTeamSubject.scheduleid == raceScheduleTeamSubjectList.teamid && raceScheduleTeamSubjectList.subjectid==raceCtfSubject.id}">
											   <c:if test="${raceScheduleTeamSubjectList.rightandwrong == '0'}"></c:if>
											   <c:if test="${raceScheduleTeamSubjectList.rightandwrong == '1'}">正确</c:if>
											   <c:if test="${raceScheduleTeamSubjectList.rightandwrong == '2'}">错误</c:if>
										   </c:if>
									   </c:forEach>
								   </td>
							   </c:forEach>
						   </tr>
					   </c:if>




					   <c:if  test="${RSTSIndex.index + 1 > 30 && RSTSIndex.index + 1 <= 40}">
						   <tr id="answer${RSTSIndex.index + 1}" style="line-height: 30px;display:none">
							   <td><img src="${raceScheduleTeamSubject.teamLogo}">${raceScheduleTeamSubject.teamid}</td>
							   <c:forEach items="${raceCtfSubjects}" var="raceCtfSubject">
								   <td>
									   <c:forEach items="${raceScheduleTeamSubjectList}" var="raceScheduleTeamSubjectList">
										   <%--raceScheduleTeamSubjectList.subjectid ---> 里面的是团队id --%>
										   <c:if test="${raceScheduleTeamSubject.scheduleid == raceScheduleTeamSubjectList.teamid && raceScheduleTeamSubjectList.subjectid==raceCtfSubject.id}">
											   <c:if test="${raceScheduleTeamSubjectList.rightandwrong == '0'}"></c:if>
											   <c:if test="${raceScheduleTeamSubjectList.rightandwrong == '1'}">正确</c:if>
											   <c:if test="${raceScheduleTeamSubjectList.rightandwrong == '2'}">错误</c:if>
										   </c:if>
									   </c:forEach>
								   </td>
							   </c:forEach>
						   </tr>
					   </c:if>



					   <c:if  test="${RSTSIndex.index + 1 > 40 && RSTSIndex.index + 1 <= 50}">
						   <tr id="answer${RSTSIndex.index + 1}" style="line-height: 30px;display:none">
							   <td><img src="${raceScheduleTeamSubject.teamLogo}">${raceScheduleTeamSubject.teamid}</td>

							   <c:forEach items="${raceCtfSubjects}" var="raceCtfSubject">
								   <td>
									   <c:forEach items="${raceScheduleTeamSubjectList}" var="raceScheduleTeamSubjectList">
										   <%--raceScheduleTeamSubjectList.subjectid ---> 里面的是团队id --%>
										   <c:if test="${raceScheduleTeamSubject.scheduleid == raceScheduleTeamSubjectList.teamid && raceScheduleTeamSubjectList.subjectid==raceCtfSubject.id}">
											   <c:if test="${raceScheduleTeamSubjectList.rightandwrong == '0'}"></c:if>
											   <c:if test="${raceScheduleTeamSubjectList.rightandwrong == '1'}">正确</c:if>
											   <c:if test="${raceScheduleTeamSubjectList.rightandwrong == '2'}">错误</c:if>
										   </c:if>
									   </c:forEach>
								   </td>
							   </c:forEach>
						   </tr>
					   </c:if>

				   </c:forEach>


			   </table>
		   </div>
	   </div>
   </div>



</div>

</body>
</html>